<template>
	<view class="classifi u-f">
		<view class="classifi__header u-f-ac">
			<text class="classifi__header--title">{{classify.title}}</text>
			<view class="classifi__header--more u-f-ac">
				<text @tap="sendTopicList">更多</text>
				<text class="icon iconfont icon-arrow-down-s-line classifi__header--m" style="font-size: 46upx;"></text>
			</view>
		</view>
		<view class="classifi__content u-f-ac">
			<text v-for="(item,index) in classify.list" :key="index">{{item.classname}}</text>
		</view>
	</view>
	
</template>

<script setup>
	const props = defineProps({
		classify:{
			type:Object,
			required:true,
		}
	})
	
	// 跳转更多分类
	function sendTopicList(e){
		uni.navigateTo({
			url:"/pages/topic-nav/topic-nav"
		})
	}
	
</script>

<style lang="scss" scoped>
	.classifi {
		padding: 20upx;
		border: 1upx solid #ccc;
		border-left: none;
		border-right: none;
		flex-direction: column;
		
		&__header{
			justify-content: space-between;
			margin-bottom: 10upx;
			&--more {
				font-size: 35upx;
				color: #ccc;
			}
			&--m{
				display: inline-block;
				transform: rotate(-90deg);
				
			}
			&--title{
				font-size: 40upx;
				font-weight: 600;
			}
		}
		&__content{
			justify-content: space-evenly;
			&>text {
				padding: 8upx 18upx;
				background-color: rgba(0,0,0,.03);
				color: #c4c4c4;
				border-radius: 6upx;
			}
		}
		
	}
	
</style>
